/* ===================================================== */
/*                MARKET OVERVIEW PRO FINAL              */
/* ===================================================== */

.market-overview{
    width:100%;
    padding:120px 80px;
    box-sizing:border-box;
}


/* ===================================================== */
/*                     TITLE                             */
/* ===================================================== */

.market-title{
    text-align:center;
    margin-bottom:60px;
}

.market-title h2{
    color:#ffffff;
    font-size:56px;
    margin-bottom:12px;
}

.market-title p{
    color:#c6d2eb;
    font-size:20px;
}


/* ===================================================== */
/*                     BOX WRAPPER                       */
/* ===================================================== */

.market-box{
    max-width:1600px;
    margin:auto;
    padding:70px;
    border-radius:40px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    box-sizing:border-box;
}


/* ===================================================== */
/*                     GRID                              */
/* ===================================================== */

.market-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:40px;
}


/* ===================================================== */
/*                     CARD                              */
/* ===================================================== */

.market-card{
    position:relative;
    text-align:center;
    padding:32px 20px;
    border-radius:24px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    transition:.3s;
    overflow:hidden;
}

.market-card:hover{
    transform:translateY(-8px);
    box-shadow:0 0 30px rgba(0,255,238,.15);
    border-color:rgba(0,255,238,.25);
}


/* ===================================================== */
/*                     COIN ICON                        */
/* ===================================================== */

.coin-symbol{
    width:82px;
    height:82px;
    margin:0 auto 18px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:36px;
    color:#fff;
}


/* COLORS */
.btc .coin-symbol{background:#f7931a;}
.eth .coin-symbol{background:#627eea;}
.sol .coin-symbol{background:#00ffaa;}
.xrp .coin-symbol{background:#00ffee;}


/* ===================================================== */
/*                     TEXT                              */
/* ===================================================== */

.market-card h3{
    color:#ffffff;
    font-size:24px;
    margin-bottom:6px;
}

.market-card span{
    color:#9fb0cb;
    font-size:14px;
    display:block;
    margin-bottom:12px;
}

.currency-label{
    font-size:26px;
    font-weight:700;
    color:#ffffff;
    margin:10px 0;
}

.market-card h4{
    color:#ffffff;
    font-size:30px;
    margin-bottom:10px;
}


/* ===================================================== */
/*                     CHANGE                            */
/* ===================================================== */

.change{
    font-size:18px;
    font-weight:600;
}

.positive{color:#00ff88;}
.negative{color:#ff4d6d;}


/* ===================================================== */
/*                     HOVER EFFECT                      */
/* ===================================================== */

.market-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top,#00ffee22,transparent 60%);
    opacity:0;
    transition:.3s;
}

.market-card:hover::before{
    opacity:1;
}


/* ===================================================== */
/*                     RESPONSIVE                        */
/* ===================================================== */

@media(max-width:1100px){
    .market-container{
        grid-template-columns:repeat(2,1fr);
    }

    .market-box{
        padding:40px;
    }
}

@media(max-width:700px){
    .market-container{
        grid-template-columns:1fr;
    }

    .market-title h2{
        font-size:38px;
    }

    .market-box{
        padding:25px;
        border-radius:26px;
    }
}